<script setup lang="ts">
import schoolFloat from '@/common/components/school-float.vue';
import UserProfileModal from '@/common/components/user/profile/index.vue';
import SignInModal from '@/common/components/user/sign-in/modal/index.vue';
import { useUserStore } from '@/stores';
import { ExclamationCircleOutlined, FireOutlined, HomeOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import { RouterLink } from 'vue-router';



defineOptions({
  name: 'LayoutDefault',
})
const userStore = useUserStore()
const [isLogin, setIsLogin] = useState<boolean | null>(false)
const [visibleSignModal, setVisibleSignModal] = useState(false)
const [visibleUserProfileModal, setVisibleUserProfileModal] = useState(false)
const isFixed = ref<boolean>(false)

// 监听滚动事件
const handleScroll = () => {
  isFixed.value = window.scrollY > 150 // 当滚动高度超过 150px 时固定
}


const menuItems: MenuProps['items'] = [
  {
    key: 'home',
    icon: () => h(HomeOutlined),
    label: h(RouterLink, { to: '/home' }, { default: () => '首页' }),
    title: '首页',
  },
  {
    key: 'project',
    icon: () => h(FireOutlined),
    label: h(RouterLink, { to: '/project' }, { default: () => '时间轴' }),
    title: '时间轴',
  },
  {
    key: '/show',
    icon: () => h(FireOutlined),
    label: h(RouterLink, { to: '/show' }, { default: () => '展示' }),
    title: '展示',
  },
]

const dropdownMenuItems: MenuProps['items'] = [
  {
    key: 'profile',
    icon: () => h(SettingOutlined),
    label: "修改信息",
    title: '修改信息',
    onClick: () => setVisibleUserProfileModal(true)
  },
  {
    key: 'sign-out',
    icon: () => h(UserOutlined),
    label: '退出登录?',
    title: '退出登录?',
    onClick: () => userStore.logout()
  },
  {
    key: 'about',
    icon: () => h(ExclamationCircleOutlined),
    label: "关于",
    title: "关于",
    onClick: () => location.href = "https://www.gdgxjx.cn/"
  }
]


watch(() => userStore.token, async newValue => {

  if (newValue) {
    setIsLogin(true)
    setVisibleSignModal(false)
    const { data } = await getUserInfoByTokenService()
    userStore.setUserInfo(data.data)
  } else {
    setIsLogin(false)
  }
}, {
  immediate: true
})

onMounted(async () => {
  window.addEventListener('scroll', handleScroll)


})

// 在组件卸载时解绑滚动事件
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <a-layout class="layout-default">
    <a-layout-header class="layout-default-header" :class="['layout-default-header', { 'fixed-header': isFixed }]">
      <h1 class="logo">
        <img src="@/assets/logo2.jpg" alt="" class="logo-img">
      </h1>

      <a-menu mode="horizontal" class="flex-1" :items="menuItems" />
      <template v-if="isLogin">
        <a-space size="small">
          <span class="nickname">{{ userStore.userInfo?.nickname }}</span>
          <a-dropdown trigger="click">
            <a-avatar size="large" :src="userStore.userInfo?.avatarUrl">
              <template #icon>
                <UserOutlined />
              </template>
            </a-avatar>
            <template #overlay>
              <a-menu :items="dropdownMenuItems" />
            </template>
          </a-dropdown>
        </a-space>

        <user-profile-modal v-model:open="visibleUserProfileModal" @ok="setVisibleUserProfileModal(false)" />
      </template>
      <template v-else>
        <a-button type="primary" @click="setVisibleSignModal(true)">登录</a-button>
        <sign-in-modal v-model:open="visibleSignModal" @ok="setVisibleSignModal(false)"
          @cancel="setVisibleSignModal(false)" />
      </template>
    </a-layout-header>
    <a-layout-content class="layout-default-content">
      <router-view />
    </a-layout-content>
    <!-- 浮动按钮 -->
    <school-float />
  </a-layout>
</template>

<style scoped lang="scss">
.layout {
  &-default {
    height: 100%;

    .logo {
      display: flex;
      margin: 0;
      margin-right: var(--gap-base);
      max-width: min-content;
      height: 80%;

      &-img {
        object-fit: cover;
      }

    }

    &-header {
      display: flex;
      background-color: var(--background);
      border-bottom: 1px solid var(--border-color);
      align-items: center;


      .nickname {
        text-wrap: nowrap;
      }
    }

    &-content {
      height: 100%;
    }
  }
}

// 固定header
.layout-default-header {
  transition: all 0.3s ease; // 添加平滑过渡效果

  &.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

:deep.layout-default-header[data-v-19b56bd5] {
  height: 80px;
}

:deep.ant-menu-horizontal {
  border-bottom: 0px;
}
</style>
